<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>PythonCurlCrontab Demo</title>
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    </head>

    <body>
    <div class="container">
        <h1>tornado WebSocket example</h1>
        <hr>
        WebSocket status : <span id="message"></span>
        <hr>
        <h3>The following table shows values by using WebSocket</h3>

        <div class="row">
            <div class="span4">
                <table class="table table-striped table-bordered table-condensed">
                    <tr>
                        <th>No.</th><th>id</th><th>value</th>
                    </tr>
                    <tr id="row1">
                        <td> 1 </td><td> id 1 </td><td id="1"> 0 </td>
                    </tr>

                </table>
            </div>

        </div>

        <hr>

        <form class="form-horizontal" id="form">
            <fieldset>
                <div id="legend" class="">
                    <legend class="">Paste The Curl Comment</legend>
                </div>

                <div class="control-group">

                    <!-- Textarea -->
                    <label class="control-label">Paste Your Curl Comment</label>
                    <div class="controls">
                        <input type="text" id="curlmessage"/>

                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label"></label>

                    <!-- Button -->
                    <div class="controls">
                        <button type="submit" class="btn btn-default">提交任务</button>
                    </div>
                </div>

            </fieldset>
        </form>



    </div>
    <script>
        var ws = new WebSocket('ws://10.210.64.147:8888/ws');
        var $message = $('#message');

        var inputBox = document.getElementById("curlmessage");
        var form = document.getElementById("form");

        ws.onopen = function(){
            $message.attr("class", 'label label-success');
            $message.text('open');
        };
        ws.onmessage = function(e) {
            alert(e.data);
        };
        ws.onclose = function(ev){
            $message.attr("class", 'label label-important');
            $message.text('closed');
        };
        ws.onerror = function(ev){
            $message.attr("class", 'label label-warning');
            $message.text('error occurred');
        };

        form.addEventListener("submit", function (e) {
            e.preventDefault();
            ws.send(inputBox.value);
            inputBox.value = "";
        }, false)

    </script>
    </body>
</html>
